<script setup>
import { ref, reactive, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { ElForm, ElFormItem, ElInput, ElButton, ElMessage, ElIcon } from 'element-plus';
import { Lock } from '@element-plus/icons-vue';
// 导入用户密码修改接口
import userApi from '../api/user_api.js';
import _ from 'lodash'; // 导入 lodash

const router = useRouter();

// 1. 表单数据
const formData = ref({
  user_id: '',
  user_name: '',
  user_phone: '',
  user_home: '',
  pet_id: '',
  pet_name: '',
  adopt_date: '',
  foster_date: ''
});

// 定义其他需要的变量
const searchObj = ref({});
const tableData = ref([]);
const total = ref(0);
const editObj = ref({});
const editWinVisible = ref(false);
const userInfoForm = ref(null); // 表单引用

// 获取表格数据
const search = async () => {
  const result = await userApi.page(searchObj.value);
  tableData.value = result.data;
  total.value = result.count;
}

// 页面加载后初始化数据
onMounted(async () => {
  search();
})

// 编辑提交
const editCommit = async () => {
  await userApi.edit(editObj.value); // 将 api 改为 userApi
  search();
  editWinVisible.value = false;
  ElMessage.success('修改成功');
}

// 编辑操作
const handleEdit = (index, row) => {
  editObj.value = _.clone(row); // 使用 lodash.clone
  editWinVisible.value = true;
}

// 重置表单
const handleReset = () => {
  userInfoForm.value.resetFields();
  ElMessage.info('表单已重置');
}
</script>
<template>
  <div class="change-info-container">
    <!-- 背景图（与系统风格统一） -->
    <div class="bg-image"></div>

    <!-- 用户信息修改卡片 -->
    <el-card class="change-info-card" shadow="hover">
      <div class="card-header">
        <div class="header-icon">
          <!-- 可替换为用户相关图标，这里用示例类名 -->
          <div class="user-icon"></div>
        </div>
        <h2 class="header-title">修改用户信息</h2>
      </div>

      <!-- 用户信息修改表单 -->
      <el-form
          ref="userInfoForm"
          :model="formData"
          label-width="120px"
          class="user-info-form"
      >
        <el-form-item label="用户编号" prop="user_id">
          <el-input v-model="formData.user_id" placeholder="用户编号" readonly></el-input>
        </el-form-item>
        <el-form-item label="用户名" prop="user_name">
          <el-input v-model="formData.user_name" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item label="用户电话" prop="user_phone">
          <el-input v-model="formData.user_phone" placeholder="请输入用户电话"></el-input>
        </el-form-item>
        <el-form-item label="用户地址" prop="user_home">
          <el-input v-model="formData.user_home" placeholder="请输入用户地址"></el-input>
        </el-form-item>
        <el-form-item label="宠物编号" prop="pet_id">
          <el-input v-model="formData.pet_id" placeholder="请输入宠物编号"></el-input>
        </el-form-item>
        <el-form-item label="宠物名称" prop="pet_name">
          <el-input v-model="formData.pet_name" placeholder="请输入宠物名称"></el-input>
        </el-form-item>
        <el-form-item label="领养时间">
          <el-date-picker
              v-model="formData.adopt_date"
              type="date"
              placeholder="选择领养时间"
              value-format="YYYY-MM-DD"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="寄养时间">
          <el-date-picker
              v-model="formData.foster_date"
              type="date"
              placeholder="选择寄养时间"
              value-format="YYYY-MM-DD"
          ></el-date-picker>
        </el-form-item>

        <!-- 操作按钮 -->
        <el-form-item class="form-actions">
          <el-button type="default" @click="handleReset">重置</el-button>
          <el-button type="primary" @click="editCommit">确认修改</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>
<style scoped>
/* 页面容器 */
.change-info-container {
  position: relative;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  background-color: #f9f9f9;
}

/* 背景图（复用系统背景） */
.bg-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('@/assets/aa.gif') no-repeat center center;
  background-size: cover;
  z-index: 1;
  filter: brightness(0.9) opacity(0.8);
}

/* 用户信息修改卡片 */
.change-info-card {
  width: 100%;
  max-width: 500px;
  background-color: rgba(255, 255, 255, 0.95);
  border-radius: 12px;
  padding: 30px;
  z-index: 2;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

/* 卡片头部 */
.card-header {
  text-align: center;
  margin-bottom: 25px;
}

.header-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, #a5dee5 0%, #ffb6b9 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
}

.user-icon {
  /* 可根据实际图标需求设置样式，这里用示例颜色占位 */
  width: 30px;
  height: 30px;
  background-color: white;
  border-radius: 50%;
}

.header-title {
  font-size: 22px;
  font-weight: 600;
  color: #333;
  margin: 0;
}

/* 按钮区域 */
.form-actions {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-top: 20px;
}

/* 响应式适配 */
@media (max-width: 576px) {
  .change-info-card {
    padding: 20px 15px;
  }

  .form-actions {
    flex-direction: column;
  }

  .form-actions .el-button {
    width: 100%;
  }
}
</style>